const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");

context.fillStyle = "red";
context.lineWidth = "2";
context.shadowColor = "rgba(0, 0, 0,.5)";
context.shadowBlur = 10;
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;

// rect
context.lineWidth = "5";
context.beginPath();
context.rect(80, 150, 150, 100);
context.stroke();

context.beginPath();
context.rect(400, 150, 150, 100);
context.fill();

context.beginPath();
context.rect(750, 150, 150, 100);
context.stroke();
context.fill();

// arc
context.beginPath();
context.arc(150, 370, 60, 0, (Math.PI * 3) / 2);
context.stroke();

context.beginPath();
context.arc(475, 370, 60, 0, (Math.PI * 3) / 2);
context.fill();

context.beginPath();
context.arc(820, 370, 60, 0, (Math.PI * 3) / 2);
context.stroke();
context.fill();

//arc 2
context.beginPath();
context.arc(150, 550, 60, 0, (Math.PI * 3) / 2);
context.closePath();
context.stroke();

context.beginPath();
context.arc(475, 550, 60, 0, (Math.PI * 3) / 2);
context.closePath();
context.fill();

context.beginPath();
context.arc(820, 550, 60, 0, (Math.PI * 3) / 2);
context.closePath();
context.stroke();
context.fill();
